<template>
    <div class="tnxbsv-paged" :class="'justify-content-' + align" v-if="value">
        <div class="paged-text" v-if="showPageSize || showTotal">
            <div class="page-size-wrapper" v-if="showPageSize">
                <span>每页</span>
                <Select v-model="pageSize" :items="pageSizeItems" v-if="pageSizeChangeable"/>
                <span class="mx-1" v-else>{{ pageSize }}</span>
                <span>条</span>
            </div>
            <div class="total-wrapper" v-if="showTotal">
                <span>共</span>
                <span class="mx-1">{{ value.total }}</span>
                <span>条</span>
            </div>
        </div>
        <BPagination v-model="pageNo"
            :total-rows="value.total"
            :per-page="value.pageSize"
            :aria-controls="ariaControls"
            :aria-label="ariaLabel"
        />
    </div>
</template>

<script>
import {BPagination} from 'bootstrap-vue-next';
import Select from '../select/Select.vue';

export default {
    name: 'TnxbsvPaged',
    components: {BPagination, Select},
    props: {
        value: Object,
        pageSizeChangeable: Boolean,
        showPageSize: {
            type: Boolean,
            default: true,
        },
        showTotal: {
            type: Boolean,
            default: true,
        },
        align: {
            type: String,
            default: 'end', // start | center | end
        },
        ariaControls: String,
        ariaLabel: String,
        query: Function,
    },
    data() {
        return {
            pageSize: this.value?.pageSize || 20,
            pageNo: this.value?.pageNo || 1,
        };
    },
    computed: {
        pageSizeItems() {
            return [{
                value: 10,
                text: '10',
            }, {
                value: 20,
                text: '20',
            }, {
                value: 50,
                text: '50',
            }];
        },
    },
    watch: {
        pageNo() {
            this.toQuery();
        },
        pageSize() {
            this.toQuery();
        },
    },
    methods: {
        toQuery() {
            if (this.query) {
                this.query({
                    pageSize: this.pageSize,
                    pageNo: this.pageNo,
                });
            }
        },
    }
}
</script>

<style>
.tnxbsv-paged {
    width: 100%;
    display: flex;
    align-items: center;
}

.tnxbsv-paged .paged-text {
    display: flex;
    align-items: center;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.tnxbsv-paged .paged-text .page-size-wrapper,
.tnxbsv-paged .paged-text .total-wrapper {
    margin-right: 0.5rem;
}

.tnxbsv-paged .form-select {
    width: 4.5rem;
    margin: 0 0.5rem;
}

.tnxbsv-paged ul {
    margin-bottom: 0;
}
</style>
